<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<style>
			.w{
				width: 1126px;
				margin: 0 auto;
			}
			.searchBar{
				width: 600px;
				height: 45px;
				border: 1px solid #333;
				margin-top: 50px;
				border-radius: 4px;
				display: flex;
				position: relative;
			}
			.searchCon{
				flex: 1;
				outline: none;
				height: 45px;
				border: none;
				text-indent: 10px;
			}
			.searchBtn{
				width: 80px;
				background-color: #6ff;
				height: 45px;
				text-align: center;
				line-height: 45px;
				border-radius: 0 4px 4px 0px;
			}
			.searchList{
				position: absolute;
				left: -1px;
				top: 44px;
				width: -webkit-calc(100% - 79px);
				line-height: 40px;
				text-indent: 10px;
				border: 1px solid #333;
				border-top: 0;
				box-sizing: border-box;
				background-color: #fff;
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- .searchBar>.searchCon+a.searchBtn+ul.searchList>li*4{$$} -->
		<div class="wrapSearch w">
			<div class="searchBar">
				<input class="searchCon" type="text">
				<a href="" class="searchBtn"></a>
				<ul class="searchList">
					<li><a href="">01</a></li>
					<li>02</li>
					<li>03</li>
					<li>04</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34647,34441,31254,34550,33848,34600,34584,34092,34505,26350,34627,34556,34691,34683&wd=h5&req=2&csor=2&pwd=h&cb=jQuery110206980964932320619_1631784744240&_=1631784744242
		
		// 简化
		// https://www.baidu.com/sugrec?prod=pc&wd=h5&cb=fn
		
		// 参数
		// prod=pc  pc端
		// wd=h5   搜索的关键词
		// cb=fn   接口返回的函数名 
		
		// 数据
		// {
		// 	g:[]  存放搜索的数据,
		// 	q:  搜索的关键词
		// }
		
		var searchList = document.getElementsByClassName("searchList")[0];
		
		function fn(data){
			console.log(data);
			var {g:list} = data;
			if(list){ //有值就是数据  没有值就是 undefined
				var html = "";
				list.forEach(item=>{
					console.log(item);
					var {q} = item;
					html += `<li><a href="">${q}</a></li>`
				})
				searchList.innerHTML = html;
				searchList.style.display = "block";
			}else{
				searchList.innerHTML ="";
				searchList.style.display = "none";
			}
		}
		
		
	</script>
	<script type="text/javascript" src=" https://www.baidu.com/sugrec?prod=pc&wd=h5&cb=fn"></script>
</html>
